<template>
	<view class="bold-song">
	
		
		<!-- #ifndef H5 -->
		<!-- <fui-nav-bar></fui-nav-bar> -->
		<!-- #endif -->
		<view style="width: 100%;padding:4%;background: #252525;color: #fff;height: 300rpx;">
			<view style="width: 60%;font-size: 52rpx;font-weight: 700;margin-top: 60rpx;">
				金币赠送
				<view style="color: #999;font-size: 32rpx;font-weight: 50;margin-top: 20rpx;">
					即时赠送金币
				</view>	
			</view>	
				
			<image style="height:300rpx;width: 300rpx;position: absolute;right: 0rpx;top:100rpx" src="../../static/my/ic_gemstone_gift_hand.png"></image>
		</view>	
		<view style="color: #000;font-size: 30rpx;font-weight: 700;;width: 94%;position: relative;top:-30rpx;margin-left: 3%;background: #fff;border-radius: 0.5em;height: 530rpx;">
			<view style="width: 92%;margin-left: 4%;padding-top: 80rpx;">
				接收人ID
			</view>	
			<view style="width: 92%;border-radius: 0.3em;margin-top:20rpx;margin-left: 4%;border: 1px solid #000;height: 80rpx;line-height: 80rpx;font-weight: 500;">
				<input v-model="form.uid" placeholder="请输入ID" type="tel" style="height: 80rpx;line-height: 80rpx;width: 90%;margin-left: 5%;">
			</view>
			
			<view style="width: 92%;margin-left: 4%;padding-top: 60rpx;">
				赠送数量
			</view>	
			<view style="width: 92%;border-radius: 0.3em;margin-top:20rpx;margin-left: 4%;border: 1px solid #000;height: 80rpx;line-height: 80rpx;font-weight: 500;">
				<input v-model="form.num" placeholder="请输整数" type="tel" style="height: 80rpx;line-height: 80rpx;width: 90%;margin-left: 5%;">
			</view>
			<view style="width: 92%;margin-left: 4%;padding-top: 30rpx;">
				拥有金币：<span style="font-size: 32rpx;color: orange;">{{userinfo.money}}</span>个
			</view>	
			
			<view class="fixed-wrap">
				<button @click="login()" :disabled="loginDisabled"  :style="codeDisabled?'':'background: #333;color: #fff;'"  class="btn-login">赠送</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			loginDisabled() {
				return !(this.form.uid && this.form.num);
			},
			codeDisabled() {
				return !(this.form.uid && this.num);
			}
		},
		data() {
			return {
				form: {
					uid: '',
					num: ''
				},
				orderList: [
					{ icon: '/static/my/ic_shop_mall_save.png', label: '全部订单', url: '/pages/my/my_order' },
					{ icon: '/static/my/ic_confirm_receipt.png', label: '待付款', url: '/pages/my/my_order?type=1' },
					{ icon: '/static/my/ic_shop_card_cabinet.png', label: '待发货', url: '/pages/my/my_order?type=2' },
					{ icon: '/static/my/ic_shop_mall_copyright_product.png', label: '待收货', url: '/pages/my/my_order?type=3' },
				],
				navList: [
					// { icon: '/static/a1.png', label: '我的钱包', url: '/pages/my/mywallet' },
					 {icon: '/static/a8.png', label: '我的矿石', url: '/pages/my/my-score' },
				
					{ icon: '/static/a2.png', label: '邀请好友', url: '/pages/share/share_msg' },
					{ icon: '/static/a3.png', label: '收货地址', url: '' },
					{ icon: '/static/a4.png', label: '帮助中心', url: '/pages/my/wenti' },
					// { icon: '/static/a5.png', label: '支付宝绑定', url: '' },
					// { icon: '/static/a6.png', label: '身份认证', url: '' },
					{ icon: '/static/a7.png', label: '检查更新', url: '' },
		
					// { icon: '/static/a9.png', label: '保险箱', url: '' }
				],
				userinfo:null
			};
		},
		onShow() {
			this.get_userinfo();
		},
		methods: {
			login(){
				if(this.form.num*1 > this.userinfo.money*1){
					return uni.showToast({
						title: '金币余额不足',
						icon: 'none'
					});
				}
				if(this.form.uid.length!=8){
					return uni.showToast({
						title: '请填写正确的用户id',
						icon: 'none'
					});
				}
				let that = this;
				uni.showLoading({ title: '正在加载', mask: true });
				uni.hideLoading();
				that.$api.request('/api/user/zengsong',this.form,uni.getStorageSync('token'), function(res) {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							if (res.code === 1) {
								setTimeout(function(){
									that.get_userinfo()
								},600)
							} 
				});
				
			},
			xiaoxi(){
					uni.navigateTo({ url: "/pages/my/my_log?type=0"});
			},
			share_dea(){
				uni.navigateTo({ url: "/pages/share/share_list"});
			},
			get_userinfo(){
				let that = this;
				uni.showLoading({ title: '正在加载', mask: true });
				uni.hideLoading();
				that.$api.request('/api/user/get_info', {},uni.getStorageSync('token'), function(res) {
								uni.hideLoading()
								if (res.code === 1) {
									that.userinfo = res.data
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
				});
				
			},
			// 导航点击处理
			navClickHandle(item) {
				if (item.url) {
					uni.navigateTo({ url: item.url });
				}
			},

			// 跳转设置
			jumpSetting() {
				uni.navigateTo({
					url: '/pages/settings/settings'
				});
			},

			// 跳转分享页面
			jumpShare() {
				uni.navigateTo({
					url: '/pages/share/share'
				});
			}
		}
	};
</script>

<style lang="less">
	page {
		background: #f3f3f3;
	}
	.my_z{
		background: url("/static/my/99ad642d016c0c2bef719108fd3f073.png") no-repeat;
		background-size: 100%;
	}

	.myinfo-wrap {
		
		padding: 32rpx;
		padding-top:80rpx;
		display: flex;
		align-items: center;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50em;
			overflow: hidden;
		}

		.myinfo {
			padding: 0 32rpx;

			.name {
				font-size: 36rpx;
				font-weight: bold;
			}

			.num {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.total-wrap {
		margin: 24rpx 32rpx;
		position: relative;

		.total_bg {
			width: 100%;
			height: 170rpx;
		}

		.total-area {
			position: absolute;
			left: 180rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #fff;
		}

		.total-label {
			font-size: 30rpx;
			margin-bottom: 12rpx;
		}

		.total-num .num {
			font-size: 48rpx;
			font-weight: bold;
		}

		.total-num .unit {
			font-size: 40rpx;
			font-weight: bold;
		}
	}

	.invite-wrap {
		margin: 24rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;

		.cell {
			display: flex;
			align-items: center;

			.label {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.label-text {
				font-size: 30rpx;
				font-weight: bold;
			}
			.label-tips {
				font-size: 26rpx;
				font-style: italic;
				background: red;
				color: #fff;
				padding: 4rpx 10rpx;
				margin-left: 12rpx;
				border-radius: 8rpx;
			}

			.arrow {
				width: 32rpx;
				height: 32rpx;
			}

			.value {
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}
		}

		.cell-tips {
			font-size: 24rpx;
			color: #999;
			margin-top: 16rpx;
			margin-bottom: 32rpx;
		}

		.total {
			display: flex;
			align-items: center;

			.total-item {
				width: 33.33%;
			}

			.total-item.border {
				border-left: 1px solid #eee;
				padding-left: 24rpx;
			}

			.total-number .num {
				font-size: 36rpx;
				font-weight: bold;
			}

			.total-number .unit {
				font-size: 32rpx;
			}

			.total-desc {
				font-size: 24rpx;
				color: #999;
			}

			.btn-invite {
				background: #333;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}

	.nav-wrap {
		margin: 24rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 0 24rpx;
		overflow: hidden;

		.navs {
			display: flex;
			flex-wrap: wrap;
		}

		.nav {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-bottom: 32rpx;
			width: 25%;
		}

		.nav-title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 24rpx 0 32rpx;
		}

		.nav-icon {
			width: 50rpx;
			height: 50rpx;
		}

		.nav-text {
			font-size: 28rpx;
			margin-top: 12rpx;
		}
	}
	
	.cell {
		display: flex;
		align-items: center;
		padding: 16rpx 32rpx;
		border-bottom: 1px solid #f3f3f3;
	
		.label {
			font-size: 32rpx;
			font-weight: 600;
		}
	
		.input {
			flex: 1;
			height: 100rpx;
			padding: 0 32rpx;
		}
	
		.btn-code {
			font-size: 28rpx;
			background: #333;
			color: #fff;
			width: 200rpx;
		}
	
		.input-placeholder {
			color: #ccc;
		}
	}
	
	.tips {
		font-size: 26rpx;
		color: #999;
		padding: 64rpx 32rpx;
	}
	
	.fixed-wrap {
		position: fixed;
		left: 48rpx;
		right: 48rpx;
		bottom: 100rpx;
		.btn-login {
			background: #333;
			color: #fff;
			font-weight: bold;
			height: 100rpx;
			line-height: 100rpx;
		}
	}
	button .btn-login{
		background: red;
	}
	button[disabled].btn-login {
		background: #e6e6e6;
	}
	
	button[disabled].btn-code {
		background: #e6e6e6;
	}
	
	
		
	button::after {
		border: none;
	}
</style>
